<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <!--搜索框 -->
    <input type="text" v-model="searchVal" >
    <div class="" v-for="item in list" @click="gohome(item)" :key="item.uid">
      {{ item.title }}
    </div>
    <p><strong>显示当前位置</strong></p> 
    <div id="allmap"></div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      // 搜索地图
      searchVal: "",
      // 地图
      map: "",
      list: [],
    };
  },
  computed: {
    ...mapState(["cityInfo"]),
  },
  methods: {
    ...mapMutations(["addCity"]),
    //返回按键
    onClickLeft() {
      //返回上一页
      this.$router.go(-1);
    },
    //返回home页面
    gohome(val) {
      this.addCity(val);
      this.$router.push("/home");
    },
    
  },
  watch: {
    searchVal() {
        // console.log(this.searchVal)
    var _this = this;
    var options = {
       onSearchComplete:function(results){
        if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            // console.log('这是大仙')
            // console.log(results);
            _this.list = results.Hr
          }
          }
      };
       var local = new BMap.LocalSearch(this.map, options);
	    local.search(this.searchVal);
    },
  },
  mounted() {
    var map = new BMap.Map("allmap");
    console.log(this.cityInfo.city)
    if (this.cityInfo.city) {
      map.centerAndZoom(new BMap.Point(this.cityInfo.point.lng,this.cityInfo.point.lat), 11);
      var mk = new BMap.Marker(this.cityInfo.point);
      map.addOverlay(mk);
      map.panTo(this.cityInfo.point);
    }else{
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true });
    }  
    this.map = map;
  },
};
</script>
<style scoped>
.van-nav-bar .van-icon {
  color: #b4282d;
}
.van-nav-bar__text {
  color: #b4282d;
}
.van-nav-bar__title {
  color: #b4282d;
}
input {
  margin-top: 50px;
}
.van-field__left-icon .van-icon {
  display: none;
}
.van-icon-search::before {
  content: none;
}
#allmap {
  width: 100%;
  height: 300px;
}
p{
  
  font-size: 18px;
}
</style>